<template>
	<view>
		<v-tabs v-model="data.current" :tabs="data.tabs" @change="changeTab"></v-tabs>
		<view class="ulist">
			<view class="item" v-for="(item,index) in data.orderList" :key="index"
				@click="$pageGo(`/pages/user/orderdetail?id=${item.id}`)">
				<view class="i_top flex_jc_sb">
					<view class="">订单号：{{item.orderNumber}}</view>
					<view class="status">{{item.orderStatus}}</view>
				</view>
				<view class="item_2 flex_jc_sb">
					<view class="images flex">
						<image v-for="(ite,index) in item.productList.slice(0,3)" :key="index" :src="ite.productIcon"
							mode="aspectFit"></image>
					</view>
					<view class="righttext flex" @click="gocardetail(item)">
						共{{item.productList.length}}种 <uni-icons color="#D1D1D6" size="16" type="right"></uni-icons>
					</view>
				</view>
				<view class="item_b flex_jc_sb">
					<view class="hj">
						合计 <text>￥</text> <text class="t2">{{item.payAmount}}</text>
					</view>
					<view class="btns">
						<view class="btn b1" v-if="item.orderStatus != '待支付'">
							查看详情
						</view>
						<view class="btn" v-if="item.orderStatus == '已送达'">
							确认送达
						</view>
						<view class="btn b2" v-if="item.orderStatus == '已完成'">
							再来一单
						</view>
						<view class="btn b1" @click.stop="cancelOrder(item)" v-if="item.orderStatus == '待支付'">
							取消订单
						</view>
						<view class="btn" v-if="item.orderStatus == '待支付'">
							继续支付
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 66rpx;">

		</view>
		<view class="k1" v-if="data.nolist">
			<image src="/static/ykong.png" mode=""></image>
			<view class="texts">
				暂无订单
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ordersList,
		ordersCancel
	} from '@/common/http.api.js'

	const data = reactive({
		tabs: ['全部', '待支付', '待备货', '备货中', '已送达', '已完成', '已退款'],
		current: 0,
		orderList: [],
		nolist: false
	})
	onReachBottom(() => {
		params.value.pageNum++
		getList()
	})
	onLoad((option) => {
		data.current = data.tabs.indexOf(option.orderStatus)
		params.value.orderStatus = option.orderStatus
	})
	onShow(() => {
		data.orderList = []
		params.value.pageNum = 1
		getList()
	})
	// 取消订单
	function cancelOrder(item) {
		uni.showModal({
			title: '系统提示',
			content: '确定要取消当前订单吗！',
			confirmText: '确定',
			confirmColor: '#FF7700',
			success: (res) => {
				if (res.confirm) {
					ordersCancel({
						id: item.id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '订单已取消',
								icon: 'none'
							})
							data.orderList = []
							params.value.pageNum = 1
							getList()
						}
					})
				} else if (res.cancel) {}
			}
		});

	}

	function gocardetail(item) {
		uni.setStorageSync('Infolist', item.productList)
		uni.navigateTo({
			url: '/pages/shopcart/cardetail'
		})
	}
	const params = ref({
		pageNum: 1,
		pageSize: 10,
		orderStatus: ''
	})

	function getList() {
		ordersList(params.value).then(res => {
			data.orderList.push(...res.rows)
			let total = Math.ceil(res.total / params.value.pageSize);
			data.nolist = total == 0
		})
	}

	function changeTab(e) {
		data.current = e
		if (e == 0) {
			params.value.orderStatus = ''
		} else {
			params.value.orderStatus = data.tabs[e]
		}
		params.value.pageNum = 1
		ordersList(params.value).then(res => {
			data.orderList = res.rows
			let total = Math.ceil(res.total / params.value.pageSize);
			data.nolist = total == 0
		})
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.k1 {
		text-align: center;
		margin: 120rpx auto;
		width: 360rpx;

		image {
			width: 360rpx;
			height: 360rpx;
		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;
		}
	}

	.ulist {
		width: 710rpx;
		margin: 20rpx auto;

		.item {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx auto;
			padding: 20rpx 20rpx 30rpx 20rpx;
			box-sizing: border-box;

			.i_top {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				.status {
					color: #979797;
					color: #FF7700;
				}
			}

			.item_2 {
				margin-top: 20rpx;

				.images {
					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 12rpx;
						border: 1rpx solid #DADADA;
						margin-right: 20rpx;
					}
				}

				.righttext {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #979797;
				}
			}

			.item_b {
				margin-top: 30rpx;

				.hj {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;

					.t2 {
						font-weight: 500;
						font-size: 32rpx;
						color: #000000;
					}
				}

				.btns {
					display: flex;

					.btn {
						width: 160rpx;
						height: 60rpx;
						background: #FF7700;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						text-align: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 60rpx;
						margin-left: 20rpx;
					}

					.b1 {
						background: #FFFFFF;
						border: 1px solid #DADADA;
						color: #000000;
					}

					.b2 {
						border: 1px solid #FF7700;
						background: #FFFFFF;
						color: #FF7700;
					}
				}
			}
		}
	}
</style>